<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layout 管理界面大布局示例 - Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="//unpkg.com/layui@2.11.2/dist/css/layui.css" rel="stylesheet">
  <script src="//unpkg.com/layui@2.11.2/dist/layui.js"></script>
</head>

<body>
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <!-- logo -->
    <div class="layui-logo layui-hide-xs layui-bg-black">layout demo</div>
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
        <a href="javascript:;">
          <img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img">
          your name
        </a>
      </li>
      <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
        <a href="javascript:;">
          <i class="layui-icon layui-icon-more-vertical"></i>
        </a>
      </li>
    </ul>
  </div>
  <div id="sidebar"></div>
    <!-- 内容主体区域 -->
    <!-- <div id="main-content" style="padding: 15px;">
      
    </div> -->
    <iframe src="cata.html" frameborder="1" style="width: 100%; height: 900px;" id="main-frame">
    </iframe>
  <div class="layui-footer">
    <!-- 底部固定区域 -->
    底部固定区域
  </div>
</div>

<script>
// 加载侧边栏
fetch('sidebar.html')
  .then(res => res.text())
  .then(html => {
    document.getElementById('sidebar').innerHTML = html;
    layui.use(['element', 'layer', 'util'], function(){
      var element = layui.element;
      var layer = layui.layer;
      var util = layui.util;
      var $ = layui.$;
      
      // 初始化元素组件
      element.init();
    var e = document.getElementById('main-frame')
      // 监听侧边栏导航点击
      element.on('nav(side-nav)', function(elem){
        console.log(elem);
        fetch(elem.attr('data-url'))
          .then(res =>{
            var url = res.url
            var name = url.split('/')
            e.src=name[name.length - 1]
          })

      });
      //头部事件
      util.event('lay-header-event', {
        menuLeft: function(othis){
          layer.msg('展开左侧菜单的操作', {icon: 0});
        },
        menuRight: function(){
          layer.open({
            type: 1,
            title: '更多',
            content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
            area: ['260px', '100%'],
            offset: 'rt',
            anim: 'slideLeft',
            shadeClose: true,
            scrollbar: false
          });
        }
      });
    });
  })
  .catch(err => {
    console.error('加载侧边栏失败:', err);
  });
  
</script>
</body>
</html>